<template>
  <div class="card-box">
    <p v-if="city === 'xian'">
      西安库存 <b>{{ xian }}</b> 件，
    </p>
    <p v-if="city === 'chengdu'">
      成都库存 <b>{{ chengdu }}</b> 件，
    </p>
    物流：
    <select>
      <option :value="item" v-for="item in expressList" :key="item">
        {{ item }}
      </option>
    </select>
    <button class="pull-right" @click="doDeliver(city, -1)">发货 >></button>
    <button class="pull-right" @click="deliver(city, -1)">异步发货 >></button>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'
export default {
  props: {
    city: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // xianCount: 100,
      // chengduCount: 80,
      // expressList: ['ZT-中通', 'YT-圆通', 'SF-顺丰']
    };
  },
  computed : {
    ...mapState({
      xian : state => state.xian.count,
      chengdu : state => state.chengdu.count,
      expressList : state => state.express.expressList
    })
  },
  methods: {
    ...mapActions({
      deliverXian : 'xian/deliver',
      deliverChengdu : 'chengdu/deliver'
    }),
    ...mapMutations({
      updateXian : 'xian/updateCount',
      updateChengdu : 'chengdu/updateCount'
    }),
    // 执行发货
    doDeliver(city, changedValue) {
      if(city === 'xian') {        
        // 原始方式
        // this.$store.commit('xian/updateCount',changedValue)
        // 辅助函数方法
        this.updateXian(changedValue)
      } else if (city === 'chengdu') {
        this.updateChengdu(changedValue)
      }
    },
    deliver(city,changedValue) {
      if(city === 'xian') {
        // 原始方法
        // this.$store.dispatch('xian/deliver',changedValue)
        // 辅助函数方法
        this.deliverXian(changedValue)
      } else if(city === 'chengdu') {
        this.deliverChengdu(changedValue)
      }
    }
  },
};
</script>